<script setup>
import { computed } from 'vue';
import router from '@/router/index.js';
import useCityStore from '@/stores/modules/city.js';
const props = defineProps({
  groupData: {
    type: Object,
    default: () => {},
  },
});
const indexList = computed(() => {
  let list = props.groupData.cities.map((item) => item.group);
  list.unshift('#');
  return list;
});

// 监听城市的点击
const cityStore = useCityStore();
const cityClick = (city) => {
  // 返回到上一级
  cityStore.cuttentCity = city;
  router.push('/home');
  // router.back();
};
</script>

<template>
  <van-index-bar :sticky="false" :index-list="indexList">
    <van-index-anchor index="热门" />
    <div class="list">
      <template v-for="item in groupData.hotCities" :key="item">
        <div class="city" @click="cityClick(item)">{{ item.cityName }}</div>
      </template>
    </div>
    <template v-for="item in groupData?.cities" :key="item">
      <van-index-anchor :index="item.group" />
      <template v-for="(city, index) in item.cities" :key="index">
        <van-cell :title="city.cityName" @click="cityClick(city)" />
      </template>
    </template>
  </van-index-bar>
</template>

<style scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
  padding-right: 25px;
  .city {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 28px;
    border-radius: 14px;
    background: #fff4ec;
    margin: 6px 0;
  }
}
</style>
